<template>
  <el-dialog title="新增" :close-on-click-modal="false" :visible.sync="visible" width="70vw" top="8vh">

    <div  :height="searchheight" >
          <span style="float:right;margin-top: -30px;cursor: pointer;" @click="searchchangeadvanced">{{ searchadvanced ? "查询条件收起" : "查询条件展开" }}
          <i :class="searchadvanced ? 'el-icon-arrow-up' : 'el-icon-arrow-down'" /> </span>
      <div  v-show="searchadvanced" >
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
                 label-width="130px">
          <div class="boxsty">
            <el-row>
              <el-col :span="8">
                <el-form-item label="任务书名称" prop="workAssignName">
                  <el-input v-model="dataForm.workAssignName" placeholder="任务书名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="16">
                <el-form-item label="有效期" required>
                  <el-col :span="10">
                    <el-form-item prop="htYxqq">
                    <el-date-picker v-model="dataForm.htYxqq" type="date" value-format="yyyy-MM-dd HH:mm:ss"
                                    placeholder="开始日期" style="width: 100%"></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="2">
                    <div class="text-center">至</div>
                  </el-col>
                  <el-col :span="10">
                    <el-form-item prop="htYxqz">
                    <el-date-picker v-model="dataForm.htYxqz" type="date" value-format="yyyy-MM-dd HH:mm:ss"
                                    placeholder="结束日期" style="width: 100%"></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="审批流程" prop="auditProcess">
                  <el-select v-model="dataForm.auditProcess" placeholder="请选择审批流程" class="xiaLa" style="width:100%" :clearable="true">
                    <el-option v-for="(item,index) in lcspList" :key="index" :label="item.name" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="签订日期" prop="signDate">
                  <el-date-picker v-model="dataForm.signDate" type="date" value-format="yyyy-MM-dd HH:mm:ss"
                                  placeholder="签订日期" style="width: 100%"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="签订级别" prop="signLevel">
                  <el-select v-model="dataForm.signLevel" placeholder="请选择签订级别" class="xiaLa" style="width:100%" :clearable="true">
                    <el-option v-for="(item,index) in qdjbList" :key="index" :label="item.name" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="多人模式" prop="multiMode">
                  <el-select v-model="dataForm.multiMode" placeholder="请选择多人合同模式" class="xiaLa" style="width:100%" :clearable="true">
                    <el-option v-for="(item,index) in drhtmsList" :key="index" :label="item.name" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="周期" prop="workAssignCycle">
                  <el-select v-model="dataForm.workAssignCycle" placeholder="请选择合同周期" class="xiaLa" style="width:100%" :clearable="true">
                    <el-option v-for="(item,index) in htzqList" :key="index" :label="item.name" :value="item.value"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>
    </div>

    <div class="mg-t20">
      <el-row>
        <el-col :span="12">
          <div>
            <div>
              <el-button type="primary" @click="addUser('fy')">发约人管理</el-button>
              <el-button type="primary" >导入发约人</el-button>
            </div>
            <el-table
              style="width: 80%;margin-top:20px"
              :data="fayuerendataList"
              border>
              <el-table-column
                prop="fayueName"
                header-align="center"
                align="center"
                label="发约人姓名">
              </el-table-column>
              <el-table-column
                prop="fayueZhiwu"
                header-align="center"
                align="center"
                min-width="180"
                label="发约人职务">
              </el-table-column>
            </el-table>
          </div>
        </el-col>
        <el-col :span="12">
          <div>
            <div style="height:32px;">
              <el-button type="primary"  v-if="!isbtnHidden"  @click="addUser('sy')">受约人管理</el-button>
              <el-button type="primary" v-if="!isbtnHidden"  >导入受约人</el-button>
            </div>
            <el-table
              style="width: 80%;margin-top:20px"
              :data="shouyuerendataList"
              border>
              <el-table-column
                prop="shouyueName"
                header-align="center"
                align="center"
                label="受约人姓名">
              </el-table-column>
              <el-table-column
                prop="shouyueZhiwu"
                header-align="center"
                align="center"
                label="受约人职务">
              </el-table-column>
            </el-table>
          </div>
        </el-col>
      </el-row>
    </div>
    <!--    发送指标部门-->
    <el-dialog title="请选择指标拟定部门" :close-on-click-modal="false" :visible.sync="zbvisible" append-to-body>
      <div style="height: 50vh">
        <el-row>
          <el-col :span="8">
            <div class="text-center">
              <el-tree
                :data="treeOrgData"
                show-checkbox
                node-key="id"
                :default-expanded-keys="[2, 3]"
                :default-checked-keys="[5]"
                :props="defaultProps"
                @check-change="handleCheckChange">
              </el-tree>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="text-center" style="line-height: 50vh">
              <el-button type="primary" @click="fnConfirmSelectedData">选择机构<i class="el-icon-d-arrow-right el-icon--right"></i></el-button>
            </div>
          </el-col>
          <el-col :span="10">
            <div class="text-center">
              <el-table
                :data="confirmTreeData"
                border>
                <el-table-column
                  prop="label"
                  header-align="center"
                  align="center"
                  label="机构名称">
                </el-table-column>
                <el-table-column
                  header-align="center"
                  align="center"
                  label="操作">
                  <template slot-scope="scope">
                    <el-button type="danger" plain size="small">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
      <el-button type="primary" plain @click="zbvisible = false">推送</el-button>
      <el-button type="primary" plain @click="zbvisible = false">返回</el-button>
    </span>

    </el-dialog>
    <!--  选择人员信息-->
    <UserCommonSelect v-if="usercomment" ref="usercomment" @refreshDataList="getDataList" @submitfy="submitfy" ></UserCommonSelect>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" plain @click="addDateHT">保存</el-button>
      <el-button type="primary" plain @click="visible = false">返回</el-button>
      <!--<el-button type="primary" @click="zbvisible=true">发送指标部门#</el-button>-->
      <!-- <el-button type="primary" @click="fnOpenZhibiao">维护指标#</el-button>-->
    </span>
  </el-dialog>
</template>

<script>

import UserCommonSelect from '@/views/hetongrenwu/components/usercomment-select'
import { getNiDingList } from '@/api/hetongrenwu/hetongyeji/hetongnd'
import {saveHtong} from "@/api/hetongrenwu/gongzuorenwushu/workAssigncj"

export default {
  components: {
    UserCommonSelect,
  },
  data() {
    return {
      isbtnHidden:false,
      xgBz: false,
      visible: false,
      canSubmit: false,
      cityOptions: [],
      jjData: [],//奖金池
      jjxList: [],//奖金项list
      fzbmData: [],
      dataForm: {},
      dataRule: {
        workAssignName: [
          {required: true, message: '任务书名称不能为空', trigger: 'change'}
        ],
        htYxqq: [
          {required: true, message: '有效期不能为空', trigger: 'blur'}
        ],
        htYxqz: [
          {required: true, message: '有效期不能为空', trigger: 'blur'}
        ],
        auditProcess: [
          {required: true, message: '审批流程不能为空', trigger: 'blur'}
        ],
        signDate: [
          {required: true, message: '签订日期不能为空', trigger: 'blur'}
        ],
        signLevel: [
          {required: true, message: '签订级别不能为空', trigger: 'blur'}
        ],
        multiMode: [
          {required: true, message: '多人模式不能为空', trigger: 'blur'}
        ],
        workAssignCycle: [
          {required: true, message: '周期不能为空', trigger: 'blur'}
        ]
      },
      lcspList:[
        {name:'2021年全员绩效考核通用流程',value:'1'},
        {name:'2021年第一季度技术合同流程',value:'2'}
      ],
      qdjbList:[
        {name:'所属单位部门负责人',value:'1'},
        {name:'本部一般管理人员',value:'2'},
        {name:'所属单位一般管理人员',value:'3'}
      ],
      drhtmsList:[
        {name:'多人共享成绩',value:'0'},
        {name:'生成多个合同',value:'1'}
      ],
      htzqList:[
        {name:'月度',value:'1'},
        {name:'季度',value:'2'},
        {name:'年度',value:'3'}
      ],
      fayuerendataList:[],
      shouyuerendataList:[],
      zbvisible:false,
      treeOrgData:[],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      confirmTreeData:[
        {
          id: 5,
          label: '二级机构'
        }
      ],
      selectedTreeData:[],
      usercomment:false,
      searchadvanced: true,
      searchheight: '0',
      jsonData:''
    }
  },
  watch: {
  },
  created() {
    this.getTreeData()
  },
  methods: {
    searchchangeadvanced() {
      this.searchadvanced = !this.searchadvanced;
      if(this.searchadvanced){
        this.searchheight= 'auto'
      }
    },
    //移除数据项
    removeItem(index) {
      this.dataForm.dataList.splice(index, 1);
      this.jjxZehj();
    },
    //初始化
    csh() {
      this.xgBz = false;
      this.jjxList = [];
      this.jjData = [];
      this.cityOptions = [];
      this.dataForm = {
        contractName:""
      };
      this.isbtnHidden=false;
      this.fayuerendataList=[];
      this.shouyuerendataList=[];
    },
    init(data) {
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
      })
      if(data != undefined){
        this.fayuerendataList=[];
        this.shouyuerendataList=[];
        this.isbtnHidden = true;
        this.dataForm=data;
       //console.log(JSON.stringify(data))
       //console.log("this.dataForm:"+JSON.stringify(this.dataForm));
        this.$forceUpdate();
        var list1=[],list2=[],obj={},list3=[],list4=[],obj2={};
        if(data.fayueZhiwu.split(',')&&data.fayueZhiwu.split(',')){
          list1=data.fayueName.split(',')
          list2=data.fayueZhiwu.split(',');
         //console.log("list1:"+JSON.stringify(list1))
         //console.log("list2:"+JSON.stringify(list2))
          for(var i in list1){
            obj={
              fayueName:list1[i],
              fayueZhiwu:list2[i]
            }
            this.fayuerendataList.push(obj);
           //console.log("this.fayuerendataList:"+JSON.stringify(this.fayuerendataList))
          }
        }else{
          obj={
            fayueName:data.fayueName,
            fayueZhiwu:data.fayueZhiwu
          }
          this.fayuerendataList.push(obj)
        }
        if(data.shouyueName.split(',')&&data.shouyueZhiwu.split(',')){
          list3=data.shouyueName.split(',')
          list4=data.shouyueZhiwu.split(',');
          for(var i=0;i<list3.length;i++){
            obj2={
              shouyueName:list3[i],
              shouyueZhiwu:list4[i]
            }
            this.shouyuerendataList.push(obj2);
          }
        }else{
          obj2={
            shouyueName:data.shouyueName,
            shouyueZhiwu:data.shouyueZhiwu
          }
          this.shouyuerendataList.push(obj2)
        }

      }else{
        this.csh();
      }

     //console.log("this.dataForm444:"+JSON.stringify(this.dataForm))
      // this.dataForm.id = JSON.stringify(data.id) || 0;
      this.visible = true;
      this.canSubmit = true;
      this.getTreeData()

    },
    //树结构选中的数据
    handleCheckChange(data){
      this.selectedTreeData=data;
     //console.log(JSON.stringify(this.selectedTreeData))
    },
    //确定选择选中得机构
    fnConfirmSelectedData(){
      this.confirmTreeData=this.selectedTreeData
    },
    getDataList(data) {
      // selHzBmList('12').then(response => {
      //   this.itemData = response.data.data
      // })
    },
    //增加人员
    addUser(type) {
      this.usercomment = true;
      if(type=='fy'){
        this.jsonData=this.dataForm.fayuejson;
      }else{
        this.jsonData=this.dataForm.shouyuejson;
      }
      this.$nextTick(() => {
        this.$refs.usercomment.init('12',type,this.jsonData);
      });
    },
    addDateHT() {
      this.dataForm.fayuejson=JSON.stringify(this.fayuerendataList);
      this.dataForm.shouyuejson=JSON.stringify(this.shouyuerendataList);
      this.$refs['dataForm'].validate((valid) => {
        if (valid) {
          saveHtong(this.dataForm).then(res=>{
            this.$message.closeAll();
            this.$message.success('保存成功')
            this.visible=false;
            this.$emit("refreash",'1')
            this.$refs.zhibiaoRef.saveZhibiao()

          })
        } else {
         //console.log('error submit!!');
          return false;
        }
      });
    },
    //打开指标维护
    fnOpenZhibiao(){
      var param={
        openZhi:true
      }
      this.$emit('openZhibiao',param)
    },
    submitfy(data){
     //console.log(data);
      if(data.type =='fy'){
        this.fayuerendataList = data.tableDataUser;
      }else if(data.type =='sy'){
        this.shouyuerendataList = data.tableDataUser;
      }
    },
    //获取树结构
    getTreeData(){
      getNiDingList().then(res=>{
       //console.log("数："+JSON.stringify(res))
        this.treeOrgData=res.data.data
      })
    }
  }
}
</script>
<style scoped>
.el-divider {
  background-color: #fff
}
</style>
